<template>
  <div class="com-container">
      <div class="title" :style="comStyle">
          <span>{{'▎' + showTitle }}</span>
          <span class="iconfont title-icon" :style="comStyle" @click="showSelect = !showSelect">&#xe6eb;</span>
          <div class="select-con" v-for="item in selectTypes" :key="item.map" v-show="showSelect" :style='conStyle'>
              <div class="select-item" @click="chooseTitle(item.key)">
                  {{ item.text }}
              </div>
          </div>
      </div>
      <div class="com-chart" ref="trend_ref"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { getThemeValue } from '../utils/theme_utils';
export default {
    data() {
        return {
            chartInstance: null,
            allData: null,
            showSelect: false,  // 控制是否显示标题选择项
            showOption: 'map',  // 要显示的选项
            titleFontSize: 0    // 设置自适应文字大小
        }
    },
    created() {
        // 组件创建完成后，进行回调函数的注册
        this.$socket.registerCallBack("trendData", this.getData);
    },
    mounted () {
        this.initChart();
        // this.getData();
        this.$socket.send({
            action: 'getData',
            socketType: 'trendData',
            chartName: 'trend',
            value: ''
        })
        window.addEventListener('resize', this.screenAdapter);
        this.screenAdapter();
    },
    destroyed () {
        window.removeEventListener('resize', this.screenAdapter);
        // 组件销毁时，进行回调函数的取消
        this.$socket.unRegisterCallBack('trendData');
    },
    computed: {
        selectTypes () {
            if (!this.allData) {
                return []
            } else {
                return this.allData.type.filter(item => {
                    return item.key !== this.showOption;
                })
            }
        },
        showTitle () {
            if (!this.allData) {
                return ''
            } else {
                return this.allData[this.showOption].title
            }
        },
        comStyle () {
            return {
                fontSize: (this.titleFontSize / 1.5) + 'px',
                color: getThemeValue(this.theme).titleColor
            }
        },
        conStyle () {
            return {
                backgroundColor: getThemeValue(this.theme).conBackgroundColor
            }
        },
        ...mapState(['theme'])
    },
    methods: {
        initChart () {
            this.chartInstance = this.$echarts.init(this.$refs.trend_ref, this.theme);
            const initOption = {
                grid: {
                    top: '35%',
                    left: '3%',
                    right: '4%',
                    bottom: '1%',
                    containLabel: true   
                },
                legend: {
                    top: '15%',
                    left: 20,
                    icon: 'circle'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false
                },
                yAxis: {
                    type: 'value'
                }
            };
            this.chartInstance.setOption(initOption)
        },
        async getData (ret) {
            // const ret = await this.$http.get('trend');
            this.allData = ret;
            this.updateChart()
        },
        updateChart () {
            // 横坐标轴月份的数据
            const timeData = this.allData.common.month;
            // 纵坐标的数据
            const valueArr = this.allData[this.showOption].data;
            // 半透明的颜色值
            const colorArr1 = [
                'rgba(11, 168, 44, 0.5)',
                'rgba(44, 110, 255, 0.5)',
                'rgba(22, 242, 217, 0.5)',
                'rgba(254, 33, 30, 0.5)',
                'rgba(250, 105, 0, 0.5)'
            ]
            // 全透明的颜色值
            const colorArr2 = [
                'rgba(11, 168, 44, 0)',
                'rgba(44, 110, 255, 0)',
                'rgba(22, 242, 217, 0)',
                'rgba(254, 33, 30, 0)',
                'rgba(250, 105, 0, 0)'
            ]
            // 设置option中的series数据值，及渐变色设置
            const seriesData = valueArr.map((item, index) => {
                return {
                    name: item.name,
                    type: 'line',
                    data: item.data,
                    stack: this.showOption,
                    areaStyle: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: colorArr1[index]
                            },
                            {
                                offset: 1,
                                color: colorArr2[index]
                            }
                        ])
                    }
                    
                }
            })
            const legendArr = valueArr.map(item => {
                return item.name;
            })
            const dataOption = {
                xAxis: {
                    data: timeData
                },
                series: seriesData,
                legend: {
                    data: legendArr
                }
            };
            this.chartInstance.setOption(dataOption);
        },
        screenAdapter () {
            this.titleFontSize = this.$refs.trend_ref.offsetWidth / 100 * 3.6;
            const adapterOption = {
                legend: {
                    itemWidth: this.titleFontSize,
                    itenHeight: this.titleFontSize,
                    itemGap: this.titleFontSize,
                    textStyle: {
                        fontSize: this.titleFontSize / 2
                    }
                }
            };
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize()
        },
        chooseTitle (key) {
            this.showOption = key;
            this.updateChart()
        }
    },
    watch: {
        theme () {
            this.chartInstance.dispose(); // 销毁当前图表
            this.initChart();
            this.screenAdapter();
            this.updateChart();
        }
    }
}
</script>

<style lang="less" scoped>
    .title {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 10;
        color: white;
        .title-icon {
            margin-left: 10px;
            cursor: pointer;
        }
        .select-con {
            cursor: pointer;
            // background-color: #222733;
        }
    }
</style>>

